<template>
    <div id="maintopRight">
       <div @click="signOut">
         <img class="user-img" src="../../../../static/images/timg.jpg" alt="">
       </div>
           <div  @click="isShow">
       	    <p class="first-name"> 
       	    	<span id="spanUserName">{{loginUser.Name}}</span>
                <span id="spanPosition">{{loginUser.Position}}</span>
       	    </p>
       	    <div class="select-icu"  v-clickoutside="handleClose"><span>当前科室：</span><a href="javascript:" class="current-office" :class="{'up' : show }" >{{loginUser.Content}}</a>
                <ul class="list-link" v-show="show">
                   <li v-for="(item,index) in tabs" :value="item.value" class='link' :key= index :class="{'active':ind == index,'hidden': item.Content=='ICU(住)','hide': item.Content=='ICU'}" @click.stop="changeBgc($event),changeInd(index)" >
                      {{item.Content}}
                  </li>
                </ul>
                  
             </div>
         </div>
      <confirm ref="alert" :message="'确认退出登录吗？'" :sureBtn="loginOut"> </confirm>
    </div>
</template>
<script>
  import confirm from '@/components/confirm/confirm'
  import { apiDepartmentList } from '@/api/api';// 导入我们的登录人相关科室api接口
  import Bus from '@/components/common/bus' //引入公共媒介JS BUS
  export default {
     data : function(){
     return {
       tabs: {},
       ind:'',
       show : false,
       loginUser:{},
     }
     },
     created(){
       this.getContent();
   },
    
    methods : {
   getContent(){
     this.loginUser = JSON.parse(sessionStorage.getItem('user'))
      //console.log(this.loginUser)
     if (this.$route.query.department == 1) {
       //  调用 登陆人相关科室 api接口
       apiDepartmentList({
       })
         .then(res => {
           this.tabs = JSON.parse(res.Data);
         })
     } else {
       return false;
     }
    },  
       changeBgc(event){
      // this.ind = e
      // this.show = ! this.show
         this.loginUser.Content = $.trim(event.currentTarget.innerHTML);
         Bus.$emit('Content', this.loginUser.Content);
         let json = JSON.parse(sessionStorage.getItem('user'));
         json.Content = this.loginUser.Content
         sessionStorage.setItem('user', JSON.stringify(json));
        
    },
     changeInd(index){
        // console.log(index)
        this.ind = index;
        this.show = false;
     },
     handleClose() {
           this.show = false;
       },
     ready() {
          document.addEventListener('click', (e) => {
          // 判断点击的是否是当前组件
          if (!this.$el.contains(e.target)) this.show = false 
            // console.log(e.target)
             // console.log(this.$el)
          })
      },
      isShow() {
        if (this.$route.query.department == 1) {
          this.show = !this.show
        } else {
          this.show = false
        }
      },
      signOut() {
        this.$refs.alert.show();
      },
      loginOut() {
        this.$router.push('/login');
      }
      
     },
    components: {
      confirm
    }
  
}
</script>
<style scoped>
 #maintopRight{
  display:flex;
  align-items:center;
  flex-direction: row-reverse;
 	width:40%;
 	height:100%;
  
 }
  #maintopRight>div{
    margin-right:30px;
  }
  #maintopRight>div>img{
    display:inline-block;
    width:60px;
    height:60px;
    border-radius:50%;
    border:2px solid #ccc;
  }
 #maintopRight p{
 	   font-size:16px;
     height:16px;
     line-height:16px;
     vertical-align: middle;
     text-align:right;
 }
.hide{
  display:none;
} 
#maintopRight .select-icu span:before{
	content:"";
	display:inline-block;
	width:17px;
	height:17px;
	background-image:url("../../../../static/images/sectionOffice.png");
	background-repeat: no-repeat;
  background-size: cover;
  vertical-align: top;
  margin-right:8px;
}
#maintopRight .select-icu span{
  display:inline-block;
  height:17px;
  line-height:17px;
  vertical-align: top;
}
#maintopRight .select-icu{
  position:relative;
  margin-top:13px;
  font-size:14px;
  height:17px;
  line-height:17px;
}
  .user-img{
    cursor:pointer;
  }
  .list-link {
    position: absolute;
    width: 150px;
    text-align: center;
    top: 30px;
    background-color: #fff;
    box-shadow: 1px -2px 15px #ccc;
    z-index: 999;
    padding: 20px 0;
    left: 35px;
  }
#maintopRight .list-link li{
  height:30px;
  line-height:30px;
  cursor:pointer;
}
/*******#maintopRight .list-link li.active {
  background-color: #11a7f3;
}****/
#maintopRight .list-link li.link:hover{
  background-color: #11a7f3;
}
#maintopRight .select-icu .current-office:after{
  content:"";
  display:inline-block;
  width:13px;
  height:13px;
  background-image:url("../../../../static/images/unfold.png");
  background-repeat: no-repeat;
  margin-left:5px;
  background-size:contain;
  vertical-align: middle;
}
#maintopRight .select-icu .current-office{
  font-size:14px;
  color:#333;
}
#maintopRight .select-icu .up:after {
  background-image:url("../../../../static/images/up.png");
}
@media (max-width: 768px) {
  #maintopRight{
    width: 100%;
    height: 70px;
  }
}
@media screen and (max-width: 425px){
  #maintopRight>div{
    margin-right: 15px;
  }
}
@media screen and (max-width: 375px){
  #maintopRight>div{
    margin-right: 0px;
  }
}
</style>
